<!--
 * @Author: Aileen的代码仓库 aileen20030308@qq.com
 * @Date: 2025-05-23 14:31:52
 * @LastEditors: Aileen的代码仓库 aileen20030308@qq.com
 * @LastEditTime: 2025-05-24 19:29:06
 * @FilePath: \static\client.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页聊天程序</title>
  <link rel="stylesheet" href="css/common.css">
  </link>
  <link rel="stylesheet" href="css/client.css">
  </link>
</head>

<body>
  <!-- 作为遮罩层,实现背景模糊的效果 -->
  <div class="cover"></div>
  <!-- 这个 div 作为整个界面的总的容器 -->
  <div class="client-container">
    <!-- 中间聊天区域 -->
    <div class="main">
      <!-- 左侧区域,显示好友列表和会话列表 -->
      <div class="left">
        <!-- 当前登录用户的用户名 -->
        <div class="user">
          <span class="username">
            Aileen
          </span>
        </div>
        <!-- 这是搜索框 -->
        <div class="search">
          <input type="text">
          <!-- 点击按钮进行搜索 -->
          <button></button>
        </div>

        <!-- 标签页 -->
        <div class="tab">
          <!-- 默认选中第一个标签 -->
          <!-- 会话列表标签 -->
          <div class="tab-session"></div>
          <!-- 好友列表标签 -->
          <div class="tab-friend"></div>
        </div>

        <!-- 会话列表 -->
        <ul class="list" id="session-list">
          <!-- 多个会话,先写死 -->
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li class="selected">
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          <li>
            <h3>乌萨奇</h3>
            <p>乌拉呀哈</p>
          </li>
          
        </ul>
        <!-- 好友列表 -->
        <ul class="list hide" id="friend-list">
          <!-- 好友 -->
          <li>
            <h4>乌萨奇</h4>
          </li>
          <li>
            <h4>小八</h4>
          </li>
          <li>
            <h4>吉伊</h4>
          </li>
          <li>
            <h4>kevin</h4>
          </li>
        </ul>
      </div>
      <!-- 右侧区域,显示聊天编辑框 -->
      <div class="right"></div>
    </div>

  </div>

  <script

</body>

</html>